<template>
  <!-- <h1 style="text-align: center; font-size: 100px">{{ user.name }}</h1>
  ——————————————————————————><button @click="changeName">点我变名字</button> -->
  <div class="login">
    <!-- logo -->
    <div class="header-logo">
      <img src="http://edu.90000p.com/exam/cyx/assets/log.6449415e.png" alt="" />
    </div>
    <!-- 登录方式切换 -->
    <div class="loginType-change">
      <h2>考试系统</h2>
      <div class="changetype">
        <!-- 二维码 -->
        <img
          v-show="changeTypelogin"
          @click="changeTypelogin = false"
          src=""
          alt=""
        />
        <!-- 用户名 -->
        <img
          v-show="!changeTypelogin"
          @click="changeTypelogin = true"
          src=""
          alt=""
        />
      </div>
    </div>
    <!-- 表单/二维码 -->
    <div class="form-box" style="margin-top: 25px">
      <el-form
        v-show="changeTypelogin"
        ref="ruleFormRef"
        :model="ruleForm"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" clearable size="large" placeholder="用户名" />
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            clearable
            size="large"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            id="btn"
            style="width: 100%; background-color: #0089ff; border-radius: 10px; height: 40px"
            @click="Debouncelogin"
            >{{ textLogin }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="forget-form">
            <span title="忘记密码？">忘记密码?</span>
          </div>
        </el-form-item>
      </el-form>
      <div v-if="!changeTypelogin" class="Code-img">
        <img src="http://edu.90000p.com/exam/cyx/assets/big_er.a666c6a8.jpg" alt="" />
        <p class="contentText">请使用<span>微信</span>扫一扫登录</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入
import { reactive, ref } from 'vue'
import { succesMsg } from '../untils/msg'
import { GetLogin } from '../api/login'
// pinia
import userStore from '../stores/user'
// 防抖
import { debounce } from '../untils/antishake'
import router from '@/router'
// 用户信息---存储到pinia中
const user = userStore()

// 数据
let textLogin = ref('登录')
let changeTypelogin = ref(true)
const ruleForm = reactive({
  username: 'admin',
  pass: 'admin'
})
// 函数
const ToLogin = async () => {
  textLogin.value = '正在登录...'
  let res = await GetLogin(ruleForm)
  console.log(res)
  if (res.errCode === 10000) {
    let p = res.data.menu
    sessionStorage.setItem('token', res.data.token)
    sessionStorage.setItem('menu', res.data.menu)
    localStorage.setItem('token',res.data.token)
    localStorage.setItem('menu',JSON.stringify(p))
    user.token = res.data.token
    user.menu = res.data.menu
    succesMsg('登录成功')
    textLogin.value = '登录'
    router.push('/home')
  }
}
// 防抖
const Debouncelogin = debounce(ToLogin, 1000)
</script>

<style scoped lang="less">
// @import url('@/assets/login/login.css');
.login {
  height: 520px;
  width: 450px;
  box-shadow: 0 6px 32px -7px #1d66bd29;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
}
.login .header-logo {
  height: 100px;
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.login .header-logo img {
  width: 70px;
  height: 70px;
}
.login .loginType-change {
  height: 50px;
  line-height: 50px;
  width: 100%;
  position: relative;
  background-color: white;
  text-align: center;
}
.login .loginType-change h2 {
  width: 200px;
  height: 50px;
  font-size: 20px;
  position: absolute;
  font-weight: 550;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login .loginType-change .changetype {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
}
.login .loginType-change .changetype img {
  width: 50px;
  height: 50px;
}
.login .form-box {
  width: 65%;
  margin: auto;
}
.login .form-box .Code-img {
  width: 80%;
  height: 250px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.login .form-box .Code-img img {
  width: 170px;
  height: 170px;
}
.login .form-box .Code-img .contentText {
  height: 30px;
  margin-top: 60px;
  width: 100%;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
.login .form-box .Code-img .contentText span {
  color: #0089ff;
}
.forget-form {
  width: 100%;
  height: 100%;
  display: flex;
  margin-bottom: 0.18rem;
  justify-content: flex-end !important;
  color: #0089ff;
  cursor: pointer;
}
.forget-form sapn {
  font-size: 0.14rem;
}
</style>
